<template>
	<view class="coAnchor">
		<view class="coAnchor_head">
			<view class="title">合作主播</view>	
			<view class="nav_back">
				<text class="iconfont icon-Left"  @click="navigateBack()"></text>
			</view>
		</view>
		<view class="coAnchor_content">
			<view class="coAnchor_item" v-for="(item,i) in list" @click="tapUrl(item.url)">
				<image class="contentImg" :src="item.img" mode="aspectFill" ></image>
				<view class="coAnchor_box">
					<view class="pRelative">
						<view class="user" :style="{ backgroundImage: 'url(' + item.avatar + ')' }"></view>
						<text class="nick">{{item.name}}</text>
					</view>
					<view class="bottom">
						<view class="">
							<text class="coAnchor_title">{{item.game_name}}</text>
						</view>
					<!-- 	<view class="">
							<image class="moreImg" src="../../static/coanchor/more_2_line@2x.png" mode="aspectFill"></image>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
import {anchor_list} from "@/api/index"
export default {
	data() {
		return {
			show: false,
			list: []
		};
	},
	onLoad() {
		this.anchor_list()
	},
	methods: {
		tapUrl(url) {
			location.href = url
		},
		async anchor_list() {
			let data = await anchor_list()
			this.list = data.data
			
		},
		queryCkick(i) {
			console.log(i)
			if(i==2) {
				this.show = true
			}
			if(i==3){
				this.navigateTo('coAnchor')
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.coAnchor {
		.coAnchor_head {
			height: 176rpx;
			background: linear-gradient( 90deg, #90F1C7 0%, #AEE6EE 54%, #F9FBAA 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: relative;
			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #22150B;
				line-height: 38rpx;
				text-align: center;
				padding-top: 100rpx;
				// position: relative;
				
			}
			.icon-Left {
				position: absolute;
				bottom: 35rpx;
				left: 25rpx;
				font-size: 28rpx;
				color: #09244B;
				font-weight: bold;
			}
		}
		.coAnchor_content {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			margin: 25rpx;
			overflow-y: scroll;
			.coAnchor_item {
				width: 49%;
				height: 272rpx;
				margin-bottom: 10rpx;
				overflow: hidden;
				position: relative;
				display: flex;
				flex-direction: column;
				&:nth-of-type(2n) {
					margin-left: 1%;
				}
				.contentImg {
					height: 172rpx;
				}
			
	
				.coAnchor_box {
					height: 100rpx;
					background: #FFE78F;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					.pRelative {
						position: relative;
						text-align: center;
						.user {
							position: absolute;
							top: -80%;
							left: 10rpx;
							width: 88rpx;
							height: 88rpx;
							border-radius: 50%;
							border: 4rpx solid #22150B;
							overflow: hidden;
							margin-right: 15rpx;
							background-size: 100%;
						}
						.nick {
							margin-left: 20rpx;
							font-size: 28rpx;
						}
						
					}
					.bottom {
						padding: 15rpx;
						margin-bottom: 25rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.coAnchor_title {
							font-weight: 500;
							font-size: 24rpx;
							color: #6C6C6C;
							line-height: 68rpx;
							font-size: 24rpx;
							color: #6C6C6C;
							line-height: 28rpx;
						}
						.moreImg {
							width: 36rpx;
							height: 36rpx;
						}
						.icon-Right {
							margin-left: 8rpx;
							font-size: 18rpx;
							font-weight: bold;
							color: #AEAEAE;
						}
					}
				}
			}
		}
	}
</style>